<template>
  <div id="app">
    <TodoHeader :records="records" @btn="btn" @entry="entry" />
    <TodoFooter :isShow="isShow" @btn1="btn1" :records="records" :ids="ids" />
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  components: {
    TodoHeader,
    TodoFooter,
  },
  data() {
    return {
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
      isShow: false,
      ids: {},
    };
  },
  methods: {
    btn(id) {
      console.log(id);
      this.isShow = true;
      // this.records[id];
      this.ids = id;
    },
    btn1(id) {
      // console.log(13);
      this.isShow = this.isShow = id;
    },
    entry(msg) {
      console.log(msg);
      if (msg) {
        this.records = this.records.filter((ele) => ele.doctor.includes(msg));
      } else {
        this.records = this.recordss;
      }
    },
  },
};
</script>

<style>
</style>
